// +---------------------------------------------------------------------- // |
LikeShop100%开源免费商用电商系统 //
+---------------------------------------------------------------------- // |
欢迎阅读学习系统程序代码，建议反馈是我们前进的动力 // | 开源版本可自由商用，可去除界面版权logo // |
商业版本务必购买商业授权，以免引起法律纠纷 // | 禁止对系统程序代码以任何目的，任何形式的再发布 // |
Gitee下载：https://gitee.com/likemarket/likeshopv2 // | 访问官网：https://www.likemarket.net // |
访问社区：https://home.likemarket.net // | 访问手册：http://doc.likemarket.net // |
微信公众号：好象科技 // | 好象科技开发团队 版权所有 拥有最终解释权 //
+---------------------------------------------------------------------- // | Author: LikeShopTeam //
+----------------------------------------------------------------------
<template>
    <view class="user-order">
        <tabs
            :active="active"
            :config="{
                itemWidth: 150,
                activeColor: '#24A3FF',
                underLineColor: '#24A3FF'
            }"
            @change="changeShow"
            ref="tabs"
        >
            <tab v-for="(item, index) in order" :key="index" :title="item.name" :name="item.type">
                <!-- #ifdef MP-WEIXIN -->
                <view v-if="isLogin">
                    <order-list
                        v-if="item.isShow"
                        :order-type="item.type"
                        :ref="'order' + item.type"
                    ></order-list>
                </view>
                <view v-else>
                    <view class="btn" @tap="goLogin">立即登录</view>
                </view>
                <!-- #endif -->
                <!-- #ifndef MP-WEIXIN -->
                <order-list
                    v-if="item.isShow"
                    :order-type="item.type"
                    :ref="'order' + item.type"
                ></order-list>
                <!-- #endif -->
            </tab>
        </tabs>
        <float-tab></float-tab>
    </view>
</template>

<script>
import { orderType } from '@/utils/type'
import { toLogin, wxMnpLogin } from '@/utils/login'

export default {
    data() {
        return {
            // active: orderType.ALL,
            active: 0,
            order: [
                {
                    name: '全部',
                    type: orderType.ALL,
                    isShow: false
                },
                {
                    name: '待付款',
                    type: orderType.PAY,
                    isShow: false
                },
                {
                    name: '待收货',
                    type: orderType.DELIVERY,
                    isShow: false
                },
                {
                    name: '已完成',
                    type: orderType.FINISH,
                    isShow: false
                },
                {
                    name: '已关闭',
                    type: orderType.CLOSE,
                    isShow: false
                }
            ]
        }
    },

    onLoad: function (options) {
        console.log(this)
        const { order } = this
        const type = options.type || orderType.ALL
        const index = order.findIndex((item) => item.type == type)
        this.changeShow(index)
    },

    mounted() {
        this.$refs.tabs.tabClick(this.active)
    },

    onPullDownRefresh: function () {
        const { active, order } = this
        console.log(this.$refs['order' + order[active].type])
        this.$refs['order' + order[active].type][0].reflesh()
    },

    onReachBottom: function () {
        const { active, order } = this
        console.log(this.$refs['order' + order[active].type])
        this.$refs['order' + order[active].type][0].getOrderListFun()
    },
    methods: {
        goLogin() {
            toLogin()
        },
        changeShow(index) {
            console.log('Active:', index)
            if (index != -1) {
                this.active = index
                this.$set(this.order[index], 'isShow', true)
            }
        }
    }
}
</script>
<style>
.btn {
    width: 180rpx;
    height: 70rpx;
    border-radius: 20rpx;
    line-height: 70rpx;
    text-align: center;
    background-image: linear-gradient(to left, #3187fd, #24a3ff);
    color: #fff;
    margin: 200rpx auto;
	border: 0;
}
</style>
